<template>
  <div>
    <el-form :model="softwareinfo" :rules="data.rules" label-width="110px" ref="ruleFormRef">

      <el-form-item :label="$t('log.version') + ':'" prop="version_no">
        <el-input v-model="softwareinfo.version_no" :placeholder="$t('message.pleaseEnter')" />
      </el-form-item>
      <el-form-item :label="$t('machine.software.filePath') + ':'" prop="path">
        <Upload :list="{ 'data': 'software', 'list': true }" :type="99" :uptype="2" :del=true @exposeData="exposeData" />
      </el-form-item>

      <el-form-item :label="$t('machine.software.softwareSize') + ':'" prop="size" v-show="props.softwareinfo?.showSize">
        <span>{{ getPlevel.measure(softwareinfo.size, 1) }}</span>
      </el-form-item>

      <el-form-item :label="$t('machine.software.version') + ':'" prop="desc">
        <el-input v-model="softwareinfo.desc" :placeholder="$t('message.pleaseEnter')" type="textarea"
          :autosize="{ minRows: 4, maxRows: 6 }" resize="none" />
      </el-form-item>

      <div class="w-full text-center">
        <div class="inline-block">

          <el-button type="primary" size="small" @click="submit(ruleFormRef)">
            <template #default>
              <span class="text-sm">{{ $t('public.save') }}</span>
            </template>
          </el-button>

          <el-button size="small" @click="cancel">
            <template #default>
              <span class="text-sm">{{ $t('public.cancel') }}</span>
            </template>
          </el-button>

        </div>
      </div>

    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { FormInstance } from "element-plus";
import Upload from '@/components/Upload/index.vue';
import getPlevel from "@/utils/level";
let emit = defineEmits(['onmacbtn'])
let ruleFormRef = ref<any>()
let props = defineProps({
  softwareinfo: {
    type: Object,
    default: {
      version_no: {
        type: String,
        default: {},
      },
      path: {
        type: String,
        default: {},
      },
      size: {
        type: Number,
        default: 0,
      },
      desc: {
        type: String,
        default: {},
      },
      showSize: false
    }
  },
})

let data = reactive({
  rules: { // 表单验证
    version_no: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
    path: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
    size: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur', type: Number },
  },
})

// 取消按钮
let cancel = () => {
  emit('onmacbtn', false)
}

// 保存按钮
let submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      emit('onmacbtn', props.softwareinfo)
    }

  })
}

let exposeData = (e) => {
  props.softwareinfo.showSize = true
  props.softwareinfo.path = e.file.response.data
  props.softwareinfo.size = e.file.size
}

</script>
